<template>
	<view>
		<view class="detail_swiper">
			<swiper autoplay circular indicator-dots>
				<swiper-item
				v-for="item in goodsObj.pics"
				:key="item.pics_id"
				@click="handlePrevewImage"
				:data-url="item.pics_mid"
				>
				<image mode="widthFix" :src="item.pics_mid"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="goods_price">￥{{goodsObj.goods_price}}</view>
		<view class="goods_name_row">
			<view class="goods_name">{{goodsObj.goods_name}}</view>
			<view class="goods_collect" @click="handleCollect">
				<text :class="['iconfont',isCollect?'icon-shoucang1':'icon-shoucang']"></text>
				<view class="collect_text">收藏</view>
			</view>
		</view>
		
		<view class="goods_info">
			<view class="goods_info_title">图文详情</view>
			<view class="goods_info_content">

			<rich-text :nodes="goodsObj.goods_introduce"></rich-text>
			</view>
		</view>

		
		<view class="tool_bg">
			<view class="btm_tool">
				<view class="tool_item">
					<view class="iconfont icon-kefu"></view>
					<view>客服</view>
					<button open-type="contact"></button>
				</view>
				<view class="tool_item">
					<view class="iconfont icon-fenxiang"></view>
					<view>分享</view>
					<button open-type="share"></button>
				</view>
				<navigator open-type="switchTab" url="/pages/cart/index" class="tool_item">
					<view class="iconfont icon-gouwuche"></view>
					<view>购物车</view>
				</navigator>
				<view class="tool_item btm_cart" @click="handleCartAdd">
					加入购物车
				</view>
				<view class="tool_item btm_buy" @click="handlePay">
					立即购买
				</view>
			</view>
		</view> 
	</view>
</template>

<script>
	export default {
		data(){
			return{
				address:{},
				cart:[],
				goodsObj:{},
				isCollect:false,
				//商品对象
    			GoodsInfo:{},
				goods_id:0
			}

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
		//获取上一页面传递过来的id参数
        let pages = getCurrentPages(); 
        let currentPage=pages[pages.length-1];
        let options=currentPage.options;   
        const {goods_id} = options;
        this.getGoodsDetail(goods_id);


    },
	onShow(){
			//获取缓存中收货地址信息
			this.address=uni.getStorageSync('address');
			//获取缓存中购物车数据
			const cart=uni.getStorageSync('cart')||[];
			
			
	},
	
	onShareAppMessage(res) {
		if (res.from === 'button') {// 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			title: '快来下单吧！'+this.goodsObj.goods_name,
			path: '/pages/goods_detail/main'
		}
    },
    onShareTimeline(res) {
     return {
            title: '',
            type: 0,
            query: 0,
            summary: "",
            imageUrl: ""
        }
    },
	methods:{
		//获取商品详情数据
		getGoodsDetail(goods_id){
			this.request({
				url:"https://api-hmugo-web.itheima.net/api/public/v1/goods/detail",
				data:{goods_id}
			})
			.then(res=>{
				this.GoodsInfo = res;
				
				//首次加载页面 收藏按钮颜色
				let collect = uni.getStorageSync('collect')||[];
				this.isCollect = collect.some(v=>v.goods_id===this.GoodsInfo.goods_id);
		
				this.goodsObj = {
					goods_name:this.GoodsInfo.goods_name,
					goods_price:this.GoodsInfo.goods_price,
					goods_introduce:this.GoodsInfo.goods_introduce.replace(/\.webp/g,'.jpg'),
					pics:this.GoodsInfo.pics
				};


				//足迹
				let footCart = uni.getStorageSync('footCart')||[];
				footCart.push(this.goodsObj);
				uni.setStorageSync('footCart',footCart);
			
			})
			
		},

		//点击轮播图放大预览
		handlePrevewImage(e){
		    const urls = this.GoodsInfo.pics.map(v=>v.pics_mid);
		    const current = e.currentTarget.dataset.url;
		    uni.previewImage({
		      urls,
		      current,
		    })
		},
		//点击加入购物车
		handleCartAdd(){
		    //获取缓存中的购物车数组
		    let cart =uni.getStorageSync("cart")||[];
		    //判断商品对象是否存在于购物车数组中
		    let index = cart.findIndex(v=>v.goods_id===this.GoodsInfo.goods_id);
		    if(index === -1){
		        //不存在 第一次添加
		        this.GoodsInfo.num=1;
		        this.GoodsInfo.checked=false;
		        cart.push(this.GoodsInfo);
		    }else{
		        //存在 num++
		        cart[index].num++;
		    }
		    //重新加回缓存数组中
		    uni.setStorageSync("cart", cart);
		    //弹窗提示
		    uni.showToast({
		      title: '添加成功',
		      icon:'success',
		      mask:true
		    });
		},
		//点击收藏
		handleCollect(){
		    let isCollect =false;
		    let collect = uni.getStorageSync('collect')||[];
		    let index =collect.findIndex(v=>v.goods_id===this.GoodsInfo.goods_id);
		    if(index!==-1){
		        collect.splice(index,1);
		        isCollect = false;
		        uni.showToast({
		          title: '取消成功',
		          icon:'success',
		          mask:true
		        });
		    }else{
		        collect.push(this.GoodsInfo);
		        isCollect=true;
		        uni.showToast({
		            title: '收藏成功',
		            icon:'success',
		            mask:true
		          });
		    }
		    uni.setStorageSync('collect', collect);
			
		    this.isCollect  =isCollect;
			
		},
		//支付
		handlePay(){
			const newAddress = this.address;
			//获取缓存中的购物车数组
		    let cart =uni.getStorageSync("cart")||[];
				if(!newAddress.userName){
					uni.chooseAddress({
					success: (result) => {
						let address = result;
						address.all = address.provinceName+address.cityName+address.countyName+address.detailInfo;
						uni.setStorageSync('address',address);
					}
					});
				}

				cart.forEach(v => {v.checked = false;});

				this.GoodsInfo.num=1;
		        this.GoodsInfo.checked=true;
				
		        cart.push(this.GoodsInfo);
				//重新加回缓存数组中
		    	uni.setStorageSync("cart", cart);
				//成功跳转支付页面
				uni.navigateTo({
				url: '/pages/pay/index',
				});
		},
		
		
	}

    
	}
</script>

<style lang="scss">
	page{
    padding-bottom: 70rpx;
	}
	.detail_swiper{
		swiper{
			height: 65vw;
			text-align: center;
			image{
				width: 60%;       
			}
		}
	}
	.goods_price{
		padding: 15rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #e64340;
	}
	.goods_name_row{
		border-top: 5rpx solid #dedede;
		border-bottom: 5rpx solid #dedede;
		padding: 10rpx 0;
		display: flex;
	.goods_name{
		flex: 5;
		color: #000;
		font-size: 30rpx;
		padding: 0 10rpx;

		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.goods_collect{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-left: 1rpx solid #000;
		.iconfont{}
		.icon-shoucang1{
			color:orangered;
		}
		.collect_text{}
	}
	}
	.goods_info{
		.goods_info_title{
			font-size: 32rpx;
			font-weight: 600;
			color:var(--themeColor);
			padding: 20rpx;
		}
		.goods_info_content{}
	}
	.tool_bg{
			border-top: 1rpx solid #ccc;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			display:flex;
		.btm_tool{
			position: relative;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			display:flex;
			.tool_item{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				position: relative;
				button{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
				}
			}
			.btm_cart{
				flex: 2;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #ffa500;
				color: #fff;
				font-size: 30rpx;
				font-weight: 600;
			}
			.btm_buy{
				flex: 2;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color:#e64340;
				color: #fff;
				font-size: 30rpx;
				font-weight: 600;
			}
		}
	}

</style>